<template>
  <div class="about-summary">
    <div class="banner">
      <img src="@/assets/images/20200401115954178998.png" alt="" />
    </div>
    <div v-if="type == 0" class="company-info">
      <h2 class="newsDetailTitle">安心汽车延保服务</h2>
      <div class="newsSource">
        <span class="Author">作者：江苏众延汽车有限公司【官网】</span>
        <span class="Hits">浏览：1377</span>
        <span class="PublishTime">发表时间：2021-02-05 10:54:49</span>
      </div>
      <div>
        <h2 class="readMore">什么是“安心汽车延保”？</h2>
        <div class="wathet-bg">
          <p style="border: 0px">
            “安心汽车延保”是由江苏众延联合保险公司推出的汽车专属延保服务，只要支付一小笔费用，即可让您的爱车在3年/10万公里原厂保修期结束后，继续享受高品质的免费保修服务。
          </p>
        </div>
      </div>
      <div>
        <h2 class="readMore">为什么您需要延保服务？</h2>
        <div class="wathet-bg">
          <p style="border: 0px"><strong>潜在的维修风险</strong></p>
          <p>
            汽车性能虽然十分可靠，但其构造却十分复杂，一台车里面包含上千种精细配件，万一某一个部件发生了问题，维修费用可能会高得令人惊愕，同时，加上工时费，即使再小的故障，都有可能让您收到数目不小的账单。一下数据是以全国汽车厂商的平均配件价格加工时费的示例。
          </p>
          <p style="margin-top: 24px">
            <img src="//img-for-hk.wds168.cn/comdata/70956/202102/202102051602007680f6.jpg" alt="" />
          </p>
        </div>
      </div>
      <div>
        <h2 class="readMore">为什么要选择“安心延保”？</h2>
        <div class="wathet-bg">
          <p style="border: 0px"><strong>无与伦比的性价比</strong></p>
          <p>主流中高端轿车1年全面延保价格示意图。</p>
          <p style="display: flex; justify-content: space-around;flex-wrap: wrap;">
            <img src="//img-for-hk.wds168.cn/comdata/70956/202102/20210205160447d86a84.jpg" alt="" />
            <img src="//img-for-hk.wds168.cn/comdata/70956/202102/20210205160448149608.jpg" alt="" />
          </p>
        </div>
      </div>
      <div>
        <h2 class="readMore">安心延保有哪些选择？</h2>
        <div class="wathet-bg">
          <p style="border: 0px; margin-bottom: 10px">安心延保期限选择</p>
          <p>保障期限一：延保1年/3万公里</p>
          <p>保障期限二：延保2年/6万公里</p>
          <p>保障期限三：延保3年/9万公里</p>
          <p>保障期限四：延保5年/8万公里（核心部件）</p>
          <p style="margin-top: 10px">
            <img src="//img-for-hk.wds168.cn/comdata/70956/202102/202102051612549ee28f.jpg" alt="" />
          </p>
          <p style="margin: 10px 0 4px">安心延保保障范围选择</p>
          <p>A整车保修</p>
          <p>
            <img src="//img-for-hk.wds168.cn/comdata/70956/202102/20210205165748f5051b.jpg" alt="" />
          </p>
          <p style="margin-top: 10px">B核心部件保修</p>
          <p>
            <img src="//img-for-hk.wds168.cn/comdata/70956/202102/2021020516161293bfa5.jpg" alt="" />
          </p>
        </div>
      </div>
      <div>
        <h2 class="readMore">怎样获得安心延保服务？</h2>
        <div class="wathet-bg">
          <p style="border: 0px"></p>
          <p style="border: 0px">
            <strong>安心延保申请条件</strong>
            只要您的爱车符合以下条件，即可申请购买安心延保服务；
          </p>
          <p>
            2、次新车：超出新车范围，购车后33个月以内或行驶里程9万5千公里以内(以先到为准)
          </p>
        </div>
      </div>
      <div class="recmsg">你的喜欢，就是我坚持写下去的能量器</div>
      <div class="yabtn" @click="toggleActive">
        <span class="iconfont icon-haowentuijian"></span>
        <span class="yatext"> {{ isdone ? "已推荐" : "好文推荐" }} </span>
      </div>
      <div class="rectext">已有{{ isdone ? "16" : "15" }}人推荐</div>

      <div v-if="isshow" class="tips-btn">感谢推荐，好的内容值得被看见</div>
    </div>
    <div v-if="type == 1" class="company-info">
      <h2 class="newsDetailTitle">延保期内客户车辆出现故障怎么办？</h2>
      <div class="newsSource">
        <span class="Author">作者：江苏众延汽车有限公司【官网】</span>
        <span class="Hits">浏览：784</span>
        <span class="PublishTime">发表时间：2021-02-05 16:28:31</span>
      </div>
      <div>
        <p>
          <img src="//img-for-hk.wds168.cn/comdata/70956/202102/202102051640367fb52f.png"
            style="width: 100%; height: auto" />
        </p>
      </div>
      <div class="shareitem"></div>
      <div class="PrevNext" style="margin-left: 20px">
        <span class="prev">
          <a href="./industrydetails?index=0">上一篇 : 安心汽车延保服务</a>
        </span>
      </div>
    </div>
    <div v-if="type == 2" class="company-info">
      <h2 class="newsDetailTitle">人事经理</h2>
      <div class="newsSource">
        <span class="Author">作者：江苏众延汽车有限公司【官网】</span>
        <span class="Hits">浏览：368</span>
        <span class="PublishTime">发表时间：2020-04-22 18:42:031</span>
      </div>
      <div class="title">
        <p style="margin-bottom: 10px">一、岗位职责：</p>
        <p>
          1.
          负责所在分公司的人才招募，包括但不限于候选人简历的筛选、挖掘，面试预约及面试过程的组织、实施，整理、记录、跟踪面试结果；
        </p>
        <p>2. 负责所在分公司的新人培训与组织；</p>
        <p>
          3.
          负责所在分公司的团队建设工作，营造良好的团队氛围；负责所在分公司的人才发展工作，包括但不限于人才梯队、员工培训；
        </p>
        <p>4. 负责所在分公司的考勤、福利、社保缴金、员工关系等人事事务工作；</p>
        <p>
          5.
          负责所在分公司的固定资产盘点，职场选址、搬迁、卫生、仪容仪表等相关工作；
        </p>
        <p>
          6.
          负责总部各项制度流程的宣导、贯彻和执行；参与奖惩规定等各项规章制度的监督与执行；负责分公司人事档案管理工作；执行总部相关政策，做好行政服务
        </p>
      </div>
      <div class="shareitem"></div>
      <div class="PrevNext">
        <span class="prev">
          <a href="./industrydetails?index=0">上一篇 : 安心汽车延保服务</a>
        </span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const type = route.query.index;
let isdone = ref(false);
let isshow = ref(false);

const toggleActive = () => {
  isdone.value = true;
  isshow.value = true;
  setTimeout(() => {
    isshow.value = false;
  }, 1500);
};
</script>
<style scoped lang="scss">
p {
  padding: 0px;
  margin: 0;
}

.about-summary {
  .banner {
    img {
      width: 100%; // 示例样式
      height: auto; // 示例样式
    }
  }

  .company-info {
    padding: 0px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    position: relative;

    .newsDetailTitle {
      font-size: 18px;
      font-weight: bold;
    }

    .newsDetailTitle::before {
      content: "|";
      margin-right: 5px;
      width: 5px;
      color: red;
      background: red;
    }

    .newsSource {
      color: #999;
      font-size: 12px;
      line-height: 1.875rem;
      border-bottom: 1px solid #eee;
    }

    .readMore {
      margin: 30px 0px 10px;
      padding: 0px 0px 0px 6px;
      border-width: 0px 0px 0px 5px;
      border-left-style: solid;
      border-left-color: rgb(75, 130, 195);
      border-image: initial;
      font-size: 20px;
      font-weight: normal;
      color: rgb(75, 130, 195);
      background-color: rgb(255, 255, 255);
    }

    .wathet-bg {
      margin: 0px;
      padding: 15px 20px;
      border: 1px solid rgb(227, 238, 247);
      background-color: rgb(248, 252, 255);
      border-radius: 8px;
      color: rgb(51, 51, 51);
      font-size: 14px;
      box-sizing: border-box;

      img {
        max-width: 100%;
        /* 确保图片不会超出父元素的宽度 */
        height: auto;
        /* 保持图片的纵横比 */
      }
    }

    .recmsg {
      color: #666;
      margin-top: 20px;
      font-size: 16px;
    }

    .yabtn {
      background: #f84b4b;
      cursor: pointer;
      line-height: 40px;
      color: #fff;
      margin: 30px auto;
      width: 131px;
      height: 40px;
      border-radius: 20px;
      font-size: 14px;
      text-align: center;
    }

    .icon-haowentuijian:before {
      content: "\e827";
    }

    .youart .icon-haowentuijian {
      margin-right: 10px;
      font-size: 20px;
    }

    .youart .yatext,
    .icon-haowentuijian {
      display: inline-block;
      vertical-align: middle;
    }

    .rectext {
      position: relative;
      color: #999;
      font-size: 14px;
      width: 131px;
      padding: 0 20px;
      line-height: 28px;
      margin: auto;
    }

    .rectext::before {
      position: absolute;
      top: 50%;
      width: 40px;
      height: 1px;
      background-color: #cccccc;
      content: "";
      left: -40px;
    }

    .rectext::after {
      position: absolute;
      top: 50%;
      width: 40px;
      height: 1px;
      background-color: #cccccc;
      content: "";
      right: -40px;
    }

    .shareitem {
      justify-content: flex-end;
      border-bottom-color: #eee;
      border-bottom: 1px solid #e5e5e5;
      padding: 5px 0 20px;
      align-items: center;
      margin: 10px 0 0;
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .title {
      color: #333;
      font-size: 14px;
    }

    .PrevNext {
      margin: 20px 0;
    }

    .prev a {
      color: #333;
      font-size: 14px;
    }
  }
}

.counter-container {
  text-align: center;
  margin: 20px 0;
}

.tips-btn {
  width: 50%;
  font-size: 14px;
  text-align: center;
  background: rgba(10, 9, 9, 0.8);
  padding: 4px;
  color: #fff;
  border-radius: 4px;
  position: absolute;
  bottom: 20%;
  left: 50%;
  /* 水平居中 */
  transform: translateX(-50%);
  /* 精确居中 */
}
</style>
